<template>
  <div class="setting-container">
   <el-card class="box-card">
      <div slot="header" class="clearfix">
        <BreadCard>个人设置</BreadCard>
      </div>
      <!-- layout布局 栅格 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form :model="from" :rules="rules" ref="from" label-width="100px" class="demo-ruleForm">
            <el-form-item label="编号">
              {{from.id}}
            </el-form-item>
            <el-form-item label="手机">
              {{from.mobile}}
            </el-form-item>
            <el-form-item label="媒体名称" prop="name">
              <el-input v-model="from.name"></el-input>
            </el-form-item>
            <el-form-item label="媒体简介" prop="intro">
              <el-input type="textarea" v-model="from.intro"></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱" prop="email">
              <el-input v-model="from.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('from')">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- http-request覆盖默认的上传行为 -->
        <el-col :span="12" class="upload">
          <el-upload
            class="avatar-uploader"
            action=""
            :http-request="uploadPhoto"
            :show-file-list="false"
            >
            <img :src="from.photo" class="avatar">
          </el-upload>
          <p class="edit-photo">修改头像</p>
        </el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script>
export default {
  data () {
    return {
      from: {
        id: null,
        email: '',
        intro: '',
        mobile: '',
        name: '',
        photo: ''
      },
      rules: {
        // 姓名在1~7个字符串之间
        name: [
          { required: true, message: '请输入媒体名称', trigger: 'blur' },
          { min: 1, max: 7, message: '长度在 1 到 7 个字符', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '请输入简介', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    async uploadPhoto (obj) {
      console.log('uploadPhoto....', obj)
      // 1. 获取本次要上传的文件
      const { file } = obj
      // 2. 发请求，更新头像
      // 这个接口本质做的是文件上传，所以传参时，不能用普通的对象格式。
      // 而应该使用formData
      const fd = new FormData()
      fd.append('photo', file)
      const result = await this.$http({
        method: 'PATCH',
        url: '/mp/v1_0/user/photo',
        data: fd
        // data: {
        //   photo: file
        // }
      })
      console.log(result)
      // 如果操作成功，则后端返回结果中会包含本次上传的图片的地址
      // 3. 更新
      this.$eventBus.$emit('hPhoto', result.data.data.photo)
      this.from.photo = result.data.data.photo
    },
    async getUser () {
      const res = await this.$http({
        url: '/mp/v1_0/user/profile',
        method: 'GET'
      })
      console.log('个人信息', res)
      this.from = res.data.data
    },
    async uditUser () {
      try {
        // 2. 请求接口，保存修改结果
        const result = await this.$http({
          method: 'PATCH',
          url: '/mp/v1_0/user/profile',
          data: {
            name: this.from.name,
            intro: this.from.intro,
            email: this.from.email
          }
        })
        console.log('huser', result)
        this.$eventBus.$emit('hUserName', result.data.data.name)
        this.$message.success('修改成功')
      } catch (err) {
        console.log(err)
        this.$message.error('修改失败')
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.uditUser()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
 .upload {
   text-align: center;
 }
 .avatar-uploader .el-upload {
    width: 100%;
    height: 100%;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #ccc;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
